<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页的标题</title>
  <style>
    
  </style>
</head>
<body>
  <div id="box">1</div>
  <div id="box">2</div>
  <div id="box">3</div>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li class="red">link3</li>
    <li>link4</li>
    <li>link5</li>
    <li>link6</li>
  </ul>
  <div class="cont">4</div>
  <div class="cont">5</div>
  <div class="cont">6</div>
  <form class="f1">
    <input>
    <textarea></textarea>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <span></span>
  </form>
  <form class="f2"></form>
  <form class="f3"></form>
  <div class="msg">
    <div class="xbox">
      <h3>标题1</h3>
      <h3>标题2</h3>
    </div>
    <h3>标题3</h3>
    <h3>标题4</h3>
  </div>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <input type="text" name="username" abc>
  <input type="text" name="password" abc qwe>
  <input type="text" name="password" qwe="hello">
</body>
<script>

  // id选择器：单个元素
  // 选中了就是单个元素
  // 没选中为null
  // var box = document.getElementById("box");
  // console.log(box);
  // box.style.background = "red";

  // class选择器：多个元素，数组形式
  // 选中了就是数组内放置多个元素
  // 没选中就是空数组
  // var cont = document.getElementsByClassName("cont");
  // console.log(cont);
  // cont[0].style.background = "red";
  // cont[1].style.background = "red";
  // cont[2].style.background = "red";
  // 如果需要操作数组内的元素，一定要先解析，再使用

  // 标签名选择器：多个元素，数组形式
  // 选中了就是数组内放置多个元素
  // 没选中就是空数组
  // var span = document.getElementsByTagName("span");
  // console.log(span)

  // name选择器：
  // 注意：哪些元素才有name属性
  // 选中了就是数组内放置多个元素
  // 没选中就是空数组
  // var pw = document.getElementsByName("password")
  // console.log(pw);


  // query选择器：单个元素
  // 提示：支持css选择器写法
  // 选中了就是单个元素
  // 没选中为null
  // var ele = document.querySelector(".cont");
  // var ele = document.querySelector("#box");
  // var ele = document.querySelector("span");
  // console.log(ele)


  // queryAll选择器：多个元素
  // 提示：支持css选择器写法
  // 选中了就是数组内放置多个元素
  // 没选中就是空数组
  // var ele = document.querySelectorAll("#box");
  // var ele = document.querySelectorAll(".cont");
  // var ele = document.querySelectorAll("span");
  // var ele = document.querySelectorAll("em");
  // var ele = document.querySelectorAll(".msg h3");
  // var ele = document.querySelectorAll(".msg>h3");
  // var ele = document.querySelectorAll("input");
  // var ele = document.querySelectorAll("input[name=password]");
  // var ele = document.querySelectorAll("input[abc]");
  // var ele = document.querySelectorAll("input[abc][qwe]");
  // var ele = document.querySelectorAll("input[qwe=hello]");
  // var ele = document.querySelectorAll(".msg+span");
  // var ele = document.querySelectorAll(".msg~span");
  // console.log(ele);

  
  // 以上都是根据 标志 直接选择指定元素

  // ========

  // 以下为关系选择，关系选择需要先获得一个基准元素

  var list = document.querySelector(".list");
  // 父选子元素：多个元素
  console.log( list.children );
  // 第一个子元素：单个
  console.log( list.firstElementChild );
  // 最后一个子元素：单个
  console.log( list.lastElementChild );

  var red = document.getElementsByClassName("red")[0];
  // 子选父：单个
  console.log( red.parentNode );
  // 兄：上一个同级：单个
  console.log( list.previousElementSibling );
  // 弟：下一个同级：单个
  console.log( list.nextElementSibling );


  // ========

  // 以下为特殊选择器（专属选择器）

  // 单个：
  // body节点
  console.log( document.body );
  // head节点
  console.log( document.head );
  // 根元素节点
  console.log( document.documentElement );

  // 表单专属选择器：多个
  console.log( document.forms );
  console.log( document.forms[0] );
  // 某个表单下所有的表单控件：多个
  console.log( document.forms[0].elements );



  // ========



  // title内容的控制（非选择器）
  console.log( document.title );
  document.title = "hello world";

</script>
</html>